<template>
    <div class="layout">
        <div class="header"></div>

        <div class="content">
            <div class="carousel">
                <div class="carousel-inner">
                    <RouterLink
                        class="carousel-item"
                        :style="rotateYStyle[index]"
                        :to="header.to"
                        v-for="(header, index) in headers"
                        :key="index"
                    >
                        {{ header.text }}
                    </RouterLink>
                </div>

                <button class="carousel-control prev" @click="prevSlide">
                    <
                </button>
                <button class="carousel-control next" @click="nextSlide">
                    >
                </button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import bgBtn from '@/assets/icons/bgBtn.png';
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';

const currentIndex = ref(0);

const prevSlide = () => {
    // if (currentIndex.value <= 0) {
    //     currentIndex.value = 6;
    // }
    currentIndex.value--;
    // currentIndex.value = currentIndex.value % 6;

    // currentIndex.value = (currentIndex.value - 1) % Headers.length;
    // console.log('======= currentIndex.value =======\n', currentIndex.value);
};

const nextSlide = () => {
    // if (currentIndex.value >= 6) {
    //     currentIndex.value = 0;
    // }
    currentIndex.value++;
    // currentIndex.value = currentIndex.value % 6;
};
interface Headers {
    to: string;
    text: string;
    icon: string;
    rotateY?: number;
}

const headers: Headers[] = [
    { to: '/water/index', text: '智慧供水', icon: bgBtn },
    { to: '/repair/index', text: '报修平台', icon: bgBtn },
    { to: '/power/index', text: '智慧供电', icon: bgBtn },
    { to: '/drainage/index', text: '智慧排水', icon: bgBtn },
    { to: '/green/index', text: '智慧绿化', icon: bgBtn },
    { to: '/savew/index', text: '节水型高校', icon: bgBtn }
];

const rotateYStyle = computed(() => {
    const styles = [];
    for (let i = 0; i < headers.length; i++) {
        const angle = (i + currentIndex.value - 1) * 60;
        console.log('======= currentIndex.value =======\n', currentIndex.value);
        const angle1 = angle % 360;

        console.log('======= angle =======\n', angle1, i);
        let visibility = 'visible';
        // if (angle1 >= 120 && angle1 < 300) {
        //     visibility = 'hidden';
        // }
        styles.push({
            transform: `rotateY(${angle1}deg) translateZ(300px)`,
            visibility
        });
    }
    return styles;
});
</script>

<style lang="scss" scoped>
* {
    /* 初始化 取消页面的内外边距 */
    margin: 0;
    padding: 0;
}

.back-hidden {
    visibility: hidden;
}
.layout {
    width: 100vw;
    height: 100vh;
    background: url('@/assets/icons/bg.png') no-repeat center / cover;
    display: flex;
    flex-direction: column;
    align-items: center;

    .header {
        width: 1000px;
        height: 200px;

        margin: 40px 0;

        background: url('@/assets/icons/indexTitle.png') no-repeat center 0px;
        background-position: center / cover;
    }

    .content {
        width: 100%;
        // margin-top: 150px;
        /* 弹性布局 水平、垂直居中 */
        height: calc(100% - 200px);

        .carousel {
            width: 100%;
            height: 100%;

            overflow: hidden;

            display: flex;
            justify-content: space-around;
            align-items: center;
            position: relative;

            .carousel-inner {
                width: 100%;
                height: 100%;

                transform-style: preserve-3d;
                perspective: 1000px; /* 设置透视距离 */
                perspective-origin: center;

                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;

                .carousel-item {
                    position: absolute;

                    width: 200px;
                    height: 200px;
                    color: $text-primary;
                    background: url('@/assets/icons/bgBtn.png') center / cover;
                    background-color: #080a17;
                    text-align: center;
                    line-height: 200px;
                    transition: transform 0.5s ease;
                    text-decoration-line: none;
                    font-size: 24px;
                }
            }

            .carousel-item:hover {
                &:before {
                    content: '';
                    position: absolute;
                    border: 5px dashed $text-primary;
                    border-radius: 50%; // 圆形边框
                    width: 70%;
                    height: 70%;
                    top: 30px;
                    left: 30px;
                    animation: spin 4s linear infinite; // 旋转动画
                    opacity: 0; // 默认隐藏
                    transition: opacity 0.5s ease;
                }
                &:hover:before {
                    opacity: 1; // 鼠标悬停时显示
                }

                &::after {
                    content: '';
                    position: absolute;
                    border: 3px dashed $text-primary;
                    border-radius: 50%; // 圆形边框
                    width: 83%;
                    height: 83%;
                    top: 18px;
                    left: 18px;
                    animation: -spin 4s linear infinite; // 旋转动画
                    opacity: 0; // 默认隐藏
                    transition: opacity 0.5s ease;
                }
                &:hover:after {
                    opacity: 1; // 鼠标悬停时显示
                }
            }
            // 动画定义
            @keyframes spin {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
            @keyframes -spin {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(-360deg);
                }
            }

            .carousel-control {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                cursor: pointer;

                border: none;
                background-color: transparent;
                color: $text-primary;
                font-weight: 800;
                font-size: 48px;

                &.prev {
                    left: 25%;
                }

                &.next {
                    right: 25%;
                }
            }
        }
    }
}
</style>
